<template>
  <div>
    <div style="max-height: 120px">
      <el-row :gutter="20">
        <el-col :span="5" style="margin-left: 80px;">
          <el-card class="card" style="border-radius: 8px; overflow: hidden;">
              <el-statistic
                  group-separator=""
                  :value="projectTotal"
                  title="总项目数（条）"
              ></el-statistic>
          </el-card>
        </el-col>

        <el-col :span="3">
          <el-card class="card" style="border-radius: 8px; overflow: hidden;">
              <el-statistic
                  group-separator=""
                  :value="winrPojectCount"
                  title="中标数（条）"
              ></el-statistic>
          </el-card>
        </el-col>

        <el-col :span="4">
          <el-card class="card" style="border-radius: 8px; overflow: hidden;">
            <el-statistic
                group-separator=""
                :value="supplierCount"
                title="供应商库（家）"
            ></el-statistic>
          </el-card>
        </el-col>

        <el-col :span="4">
          <el-card class="card" style="border-radius: 8px; overflow: hidden;">
              <el-statistic
                  group-separator=""
                  :value="agentCompanyCount"
                  title="代理公司（家）"
              ></el-statistic>
          </el-card>
        </el-col>

        <el-col :span="4">
          <el-card class="card" style="border-radius: 8px; overflow: hidden;">
              <el-statistic
                  group-separator=""
                  :value="totalAmount"
                  title="总成交金额"
              ></el-statistic>
          </el-card>
        </el-col>
      </el-row>
    </div>
      <MyChart style="margin-top: 30px"></MyChart>
  </div>
</template>


<script>
import MyChart from "@/components/MyChart.vue";
import {getProjectTotal, getTotalAmount, getWinnotiProjectCount} from "@/api/project";
import {getSuppler} from "@/api/department";

export default {
  name: "BossmanHome",
  data() {
    return {
      projectTotal: 0,
      winrPojectCount: 0,
      supplierCount: 0,
      agentCompanyCount: 0,
      totalAmount: 0,
    };
  },
  components:{
    MyChart,
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      await getProjectTotal().then(res => {
        this.projectTotal = res
      });
      await getWinnotiProjectCount().then(res => {
        this.winrPojectCount = res
      });
      await getSuppler().then(res => {
        this.supplierCount = res
      });
      await getTotalAmount().then(res => {
        this.totalAmount = res
      })
    }
  }

}
</script>


<style scoped>
    .like {
      cursor: pointer;
      font-size: 25px;
      display: inline-block;
    }
</style>